import { useState } from 'react'
import { Layout, Typography, Image, Space, Divider } from 'antd'
import TranslationForm from './components/TranslationForm'
import TranslationResult from './components/TranslationResult'
import './App.css'

const { Header, Content, Footer } = Layout
const { Title } = Typography

function App() {
  const [translationResult, setTranslationResult] = useState<any>(null)
  const [loading, setLoading] = useState(false)

  return (
    <Layout className="layout">
        <div className="logo-container">
          <Image 
            src="/1.webp" 
            alt="翻译助手Logo" 
            preview={false}
            style={{ maxHeight: '120px' }}
          />
        </div>
      <Header className="header">
        <Title level={3} style={{ color: 'white', margin: 0 }}>多语言翻译助手</Title>
      </Header>
      <Content className="content">
        {/* Logo展示区域 */}
        <Divider />
        
        <TranslationForm 
          onTranslationStart={() => setLoading(true)}
          onTranslationComplete={(result) => {
            setTranslationResult(result)
            setLoading(false)
          }}
          onTranslationError={() => setLoading(false)}
        />
        
        {translationResult && (
          <TranslationResult 
            result={translationResult} 
            loading={loading} 
          />
        )}
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        多语言翻译助手 ©{new Date().getFullYear()} 基于AWS Translate服务
      </Footer>
    </Layout>
  )
}

export default App